<template>
  <div class="tag-container">
    <!-- 标签列表 -->
    <div
      v-for="tag in tags"
      :key="tag.id"
      class="tag"
      :class="{ selected: selectedTags.includes(tag.name) }"
      @click="toggleTag(tag.name)"
    >
      <img :src="tag.image" alt="" class="tag-image" />
      <span>{{ tag.name }}</span>
    </div>
  </div>
  <!-- 根据是否选择了标签来显示不同的按钮文案 -->
  <button class="skip-button" @click="goToIndex">
    {{ selectedTags.length > 0 ? '确认并进入主页' : '跳过选择' }}
  </button>
</template>

<script setup>
import { ref } from 'vue'

const tags = ref([
  {
    id: 1,
    name: 'iu',
    image:
      'https://img.51miz.com/Element/00/88/08/86/716b81c7_E880886_bebe0ef3.png',
  },
  {
    id: 2,
    name: 'fy',
    image:
      'https://img.51miz.com/Element/00/88/08/86/716b81c7_E880886_bebe0ef3.png',
  },
  {
    id: 3,
    name: 'lcy',
    image:
      'https://img.51miz.com/Element/00/88/08/86/716b81c7_E880886_bebe0ef3.png',
  },
  {
    id: 4,
    name: '旅游',
    image:
      'https://img.51miz.com/Element/00/88/08/86/716b81c7_E880886_bebe0ef3.png',
  },
  {
    id: 5,
    name: 'food',
    image:
      'https://img.51miz.com/Element/00/88/08/86/716b81c7_E880886_bebe0ef3.png',
  },
  {
    id: 6,
    name: '攻略',
    image:
      'https://img.51miz.com/Element/00/88/08/86/716b81c7_E880886_bebe0ef3.png',
  },
])

const selectedTags = ref([])

const toggleTag = (tagName) => {
  const index = selectedTags.value.indexOf(tagName)
  if (index > -1) {
    selectedTags.value.splice(index, 1)
  } else {
    selectedTags.value.push(tagName)
  }
}

const goToIndex = () => {
  if (selectedTags.value.length > 0) {
    // 将选中的标签存储在全局变量或进行其他处理
    // 由于switchTab不支持传递参数，我们需要找到其他方法来传递参数，比如全局状态管理或本地存储
    uni.setStorageSync('selectedTags', selectedTags.value)

    uni.switchTab({
      url: '/pages/index/index',
    })
  } else {
    // 如果是跳过选择，则直接跳转到 tabBar 页面
    uni.switchTab({
      url: '/pages/index/index',
    })
  }
}
</script>
<style scoped>
.tag-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30rpx; /* 可以用 gap 来设置元素之间的间隙 */
}

.tag {
  flex: 0 0 calc(33.33% - 30rpx); /* flex-basis 设置为减去间隙的三分之一宽度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
  cursor: pointer;
  /* border: 1px solid #ddd; */ /* 如有必要，可添加边框 */
  padding: 10rpx;
  box-sizing: border-box; /* 确保padding和border包含在宽度计算之内 */
}

.tag-image {
  width: 100%; /* 图片宽度设置为100%，自适应容器宽度 */
  height: auto; /* 高度自适应以保持图片比例 */
  aspect-ratio: 1; /* 保持图片为正方形 */
}

.selected {
  background-color: #eee;
}
</style>
